<template>
    <div id="BookingAgain">
        <NavBarTitle :NavBarTitle="NavBarTitle"/>
        <div class="title flex aCenter between">
            <div class="leftN flex jEnd">{{Departure}}</div>
            <div class="ban">
                <div class="arrow"></div>
                <div class="rotate"></div>
            </div>
            <div class="rightN">{{arrive}}</div>
        </div>
        <!--日期-->
        <div class="TimeC flex between aCenter">
            <div class="leftBtn">
                <van-button @click="preDate" icon="play">前一天</van-button>
            </div>
            <div class="DateSelect">
                <van-button round  @click="show = true"><span class="iconfont">&#xe6cc;</span>{{date}}</van-button>
            </div>
            <div class="rightBtn">
                <button @click="nextDate" data-v-09ba51cb="" class="van-button van-button--default van-button--normal">
                    <span data-v-09ba51cb="" class="van-button__text"> 后一天 </span>
                    <i data-v-09ba51cb="" class="van-icon van-icon-play van-button__icon"/>
                </button>
            </div>
        </div>
        <div class="line"/>
        <!--列表-->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
                <template v-for="item in circuit">
                    <div class="listF" @click="toOrderSubmit(item.id)">
                        <div class="list flex between">
                            <div class="time">{{item.presaletime | timeFormat}}</div>
                            <div class="center flex aStart">
                                <div class="flex column aCenter">
                                    <div class="greenR"></div>
                                    <div class="sLine"></div>
                                    <div class="redR"></div>
                                </div>
                                <div class="marL">
                                    <div class="marB">
                                        <div class="station">{{item.citysname}}</div>
                                        <div class="sStation">{{item.sitesname}}</div>
                                    </div>
                                    <div>
                                        <div class="station">{{item.cityename}}</div>
                                        <div class="sStation">{{item.siteename}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="money flex column aEnd">
                                <div class="moneyColor">￥{{item.ticket_price}}</div>
                                <div style="margin-top: 5px">余票{{item.s_ticket}}张</div>
                            </div>
                        </div>
                    </div>
                </template>

            </van-list>
        </van-pull-refresh>

        <van-calendar v-model="show" @confirm="onConfirm" position="right" :round="false" color="#0fa0a0"/>
    </div>
</template>

<script>
    import NavBarTitle from 'components/NavBarTitle.vue'
    export default {
        data() {
            return {
                NavBarTitle:'再次订票',
                date: '',
                show: false,
                selectDate:'',
                Departure:'',
                arrive:'',
                sendTime:'',
                circuit: [],
                loading: false,
                finished: false,
                refreshing: false,
                page: 0,
            }
        },
        components: {
            NavBarTitle
        },
        methods: {
            onRefresh() {
                this.finished = false;
                this.page = 0;
                this.circuit = [];
                this.loading = true;
                this.onLoad();
            },
            onLoad() {
                this.loading = true;
                if (this.refreshing) {
                    this.circuit = [];
                    this.refreshing = false;
                }
                this.page++;
                let data = {
                    token: this.$store.state.token,
                    page: this.page,
                    limit: 10,
                    sid: this.$route.query.sid,
                    eid: this.$route.query.eid,
                    stype : 'site',
                    etype: 'site',
                };
                this.$axios.post(this.$index + this.$api.home.sSearch, this.$Qs.stringify(data))
                    .then((res) => {
                        console.log(res);
                        if (res.data.flag) {
                            if(res.data.data.data.length > 0){
                                for(let i = 0; i < res.data.data.data.length; i++){
                                    this.circuit.push(res.data.data.data[i]);
                                }
                                this.loading = false;
                                console.log(this.circuit)
                            }else if(res.data.data.data.length == 0){
                                this.finished = true;
                            }
                        } else {
                            this.$toast(res.data.msg)
                        }
                    }).catch((err) => {
                    console.log(err);
                })
            },
            toOrderSubmit(id){
                this.$router.push({path:'/orderSubmit',query:{id:id,order_id:this.$route.query.order_id}})
            },
            preDate(){
                let NYear = new Date(this.selectDate.getTime()).getFullYear();
                let NMonth = new Date(this.selectDate.getTime()).getMonth();
                let NDay = new Date(this.selectDate.getTime()).getDate();
                let Year = new Date().getFullYear();
                let Month = new Date().getMonth();
                let Day = new Date().getDate();
                if(NYear >=Year && NMonth >=Month && NDay >Day){
                    let preDate = new Date(this.selectDate.getTime() - 24*60*60*1000); //前一天
                    this.sendTime = this.getTime(preDate);
                    this.onRefresh();
                    console.log(this.getTime(preDate));
                    this.date = this.formatDate(preDate);
                }else {
                    this.$toast.fail('无法购买往日车票');
                }
            },
            nextDate(){
                let nextDate = new Date(this.selectDate.getTime() + 24*60*60*1000); //后一天
                this.sendTime = this.getTime(nextDate);
                this.onRefresh();
                this.date = this.formatDate(nextDate);
            },
            formatDate(date) {
                this.selectDate = date;
                return `${date.getMonth() + 1}月${date.getDate()}`+'日'+this.getDayName(date);
            },
            getDayName(d){
                let td=new Date();
                td=new Date(td.getFullYear(),td.getMonth(),td.getDate());
                let  od=new Date(d);
                od=new Date(od.getFullYear(),od.getMonth(),od.getDate());
                let xc=(od-td)/1000/60/60/24;
                if(xc<-2){
                    return -xc+"天前";
                }else if(xc<-1){
                    return "前天";
                }else if(xc<0){
                    return "昨天bai";
                }else if(xc==0){
                    return "今天";
                }else if(xc<2){
                    return "明天";
                }else if(xc<3){
                    return "后天";
                }else{
                    return xc+"天后";
                }
            },
            onConfirm(date) {
                this.show = false;
                this.sendTime = this.getTime(date);
                this.onRefresh();
                this.date = this.formatDate(date);
            },
            initializationTime(){
                let date;
                if(this.$route.query.day){
                    date =  new Date(this.$route.query.day).getTime();
                    date= new Date(parseInt(date));
                    this.sendTime = this.getTime(date);
                }else {
                    date = new Date();
                    this.sendTime = this.getTime(date);
                }
                this.selectDate = date;
                this.date = this.formatDate(date);
                // return `${date.getMonth() + 1}月${date.getDate()}`+'日'+this.getDayName(date);
            },
            getTime(date){
                let Y = date.getFullYear();
                let M = date.getMonth()+1;
                let D = date.getDate();
                return Y + "-" + M + "-" + D
            },
        },
        filters:{
            timeFormat(val){
                let index=val.lastIndexOf(" ");
                val=val.substring(index+1,val.length);
                let indexD = val.lastIndexOf(":");
                val = val.substring(0,indexD);
                return val
            }
        },
        created() {

            if(this.$route.query.ssite){
                this.Departure = this.$route.query.ssite
            }
            if(this.$route.query.esite){
                this.arrive = this.$route.query.esite
            }
            this.initializationTime();
        }
    }
</script>

<style scoped>
    .time{
        font-size: 17px;
        color: #333333;
        margin-top: 32px;
        margin-left: 12px;
    }
    .money{
        width: 100px;
        font-size: 11px;
        color: #888888;
        margin-top: 32px;
        margin-right: 12px;
    }
    .moneyColor{
        font-size: 16px;
        color: #ff0909;
    }
    .center{
        margin-top: 19px;
        margin-bottom: 15px;
        margin-right: 1%;
    }
    .title{
        width: 100%;
        height: 58.5px;
        background-color: #0fa0a0;
        font-size: 17px;
        color: #ffffff;
        position: relative;
    }
    .arrow{
        width: 67px;
        height: 1px;
        background-color: #7fcccc;
    }
    .rotate{
        margin-left: 62.25px;
        width: 4.75px;
        height: 1px;
        background-color: #7fcccc;
        -webkit-transform: rotate(-25deg);
        -moz-transform: rotate(-25deg);
    }
    .leftN{
        width: 35%;
    }
    .rightN{
        width: 35%;
    }
    .ban{
        position: absolute;
        margin-left: 41.1%;
    }
    .leftBtn /deep/.van-button__icon{
        transform: rotateY(180deg);
    }
    .leftBtn/deep/.van-button, .rightBtn /deep/.van-button{
        border:none;
        color: #0fa0a0;
        height: 60px;
        line-height: 60px;
    }
    .TimeC{
        width: 100%;
        background-color: #ffffff;
    }
    .DateSelect/deep/.van-button{
        height: 29.5px;
        line-height: 29.5px;
        border: 1px solid #20b192;
        font-size: 14px;
        color: #20b192;
    }
    .iconfont{
        font-size: 14px;
        color: #20b192;
    }
    .line{
        width: 100%;
        height: 10px;
        background-color: #f2f5fa;
    }
    .greenR, .redR{
        width: 9px;
        height: 9px;
        border-radius: 50%;
        border: 1.5px solid #20b192;
    }
    .sLine{
        width: 2px;
        height: 41.5px;
        background-color: #f3f3f3;
    }
    .redR{
        border: 1.5px solid #f49b9b;
    }
    .listF{
        width: 100%;
        background-color: #ffffff;
        border-bottom: 5px solid #f2f5fa;
    }
    .station{
        font-size: 14px;
        color: #333333;
    }
    .sStation{
        font-size: 12px;
        color: #999999;
    }
    .marB{
        margin-top: -3px;
        margin-bottom: 12px;
    }
    .marL{
        margin-left: 9px;
    }
</style>